<template>
    <div>
        <loading v-if="!isReady"></loading>
        <search></search>
        <swipe :images="images"></swipe>
        <top></top>
        <grid :hot_list="hot_list"></grid>
        <tab-bar></tab-bar>
    </div>
</template>

<script>
import Swipe from '../components/swipe'
import Grid from '../components/grid'
import Top from '../components/top_grid'
export default {
    name: "index",
    components: {
        Swipe, Grid, Top
    },
    data() {
      return {
          images: [],
          isReady: false,
          hot_list: [],
      }
    },
    created() {
        this.onLoad();
        this.HotProduct();
    },
    methods: {
        onLoad: function () {
            this.$api.home.Banner().then(res => {
                this.images = res.data.data;
                // this.isReady = true;
            })
        },
        HotProduct: function () {
            this.$api.home.HotList().then(res => {
                this.hot_list = res.data.data;
                this.isReady = true;
            })
        }
    }
}
</script>

<style scoped>

</style>
